<!DOCTYPE html>
<!-- 删除 lang ="en" 去除浏览器的翻译提示 -->
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 icon 字体图标样式 -->
    <link rel="stylesheet" href="fonts/icomoon.css" />
    <!-- 引入自己的css样式 -->
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <!-- 头部 header -->
    <header>
      <img src="./images/logo.png" alt="" class="head_logo" />
    </header>
    <!-- 新增的注释 -->
    <!-- 内容 container -->
    <div class="container">
      <!-- 内容左边 -->
      <div class="container_left">
        <!-- 设备 -->
        <div class="panel device">
          <ul>
            <li class="device_item">
              <h4>2,190</h4>
              <p><i class="icon-dot"></i><span>设备总数</span></p>
            </li>
            <li class="device_item">
              <h4>190</h4>
              <p><i class="icon-dot"></i><span>季度新增</span></p>
            </li>
            <li class="device_item">
              <h4>3,001</h4>
              <p><i class="icon-dot"></i><span>运营设备</span></p>
            </li>
            <li class="device_item">
              <h4>108</h4>
              <p><i class="icon-dot"></i><span>异常设备</span></p>
            </li>
          </ul>
        </div>
        <!-- 监控 -->
        <div class="panel monitoring">
          <div class="panel_title">
            <h3>故障设备监控</h3>
            <div class="line"></div>
            <div class="dis_active">异常设备监控</div>
          </div>
          <div class="mon_head">
            <span>故障时间</span>
            <span>设备地址</span>
            <span>异常代沟</span>
          </div>
          <div class="mon_item">
            <ul>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
              <li>
                <span>20210122</span>
                <span>广东省广州市吉山村黑马程序员</span>
                <span>100005</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 点位 -->
        <div class="panel point">
          <div class="panel_title">
            <h3>点位分布统计</h3>
          </div>
          <div class="point_con">
            <div class="point_map">图表</div>
            <div class="rect">
              <div class="rect_item">
                <h3 class="rect_number">320,11</h3>
                <div class="rect_text">
                  <i class="icon-dot"></i><span>点位总数</span>
                </div>
              </div>
              <div class="rect_item">
                <h3 class="rect_number">418</h3>
                <div class="rect_text">
                  <i class="icon-dot"></i><span>本月新增</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 内容中间 -->
      <div class="container_center">
        <!-- 迁徙图 -->
        <h2 class="migrate_title"><i class="icon-cube"></i>设备数据统计</h2>
        <div class="migrate_map">迁徙图</div>
        <!-- 全国用户总量统计 -->
        <div class="panel user">
          <div class="panel_title">
            <h3>全国用户总量统计</h3>
          </div>
          <div class="user_con">
            <div class="user_map">图表</div>
            <div class="rect">
              <div class="rect_item">
                <h3 class="rect_number">120,899</h3>
                <div class="rect_text">
                  <i class="icon-dot"></i><span>用户总量</span>
                </div>
              </div>
              <div class="rect_item">
                <h3 class="rect_number">248</h3>
                <div class="rect_text">
                  <i class="icon-dot"></i><span>本月新增</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容右边 -->
      <div class="container_right">
        <!-- 订单 -->
        <div class="panel order">
          <div class="panel_title order_title">
            <h3 class="dis_active">365天</h3>
            <div class="line"></div>
            <h3>90天</h3>
            <div class="line"></div>
            <h3 class="dis_active">30天</h3>
            <div class="line"></div>
            <h3 class="dis_active">24小时</h3>
          </div>
          <div class="order_list">
            <div class="order_item">
              <div class="order_number order_num1">20,301,987</div>
              <div class="order_text">
                <i class="icon-dot"></i><span>订单量</span>
              </div>
            </div>
            <div class="order_item">
              <div class="order_number order_num2">99834</div>
              <div class="order_text">
                <i class="icon-dot"></i><span>销售额(万元)</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 销售额 -->
        <div class="panel sale">
          <div class="panel_title">
            <h3>销售额统计</h3>
            <div class="line"></div>
            <ul class="sale_title">
              <li class="active">年</li>
              <li>季</li>
              <li>月</li>
              <li>周</li>
            </ul>
          </div>
          <div class="sale_map">图表</div>
        </div>

        <!-- 渠道 -->
        <div class="distribute">
          <!-- 渠道分布 -->
          <div class="panel channel">
            <div class="panel_title">
              <h3>渠道分布</h3>
            </div>
            <div class="channel_list">
              <div class="channel_item">
                <h3 class="channel_number">39</h3>
                <div class="channel_text">
                  <i class="icon-plane"></i><span>机场</span>
                </div>
              </div>
              <div class="channel_item">
                <h3 class="channel_number">28</h3>
                <div class="channel_text">
                  <i class="icon-bag"></i><span>商场</span>
                </div>
              </div>
              <div class="channel_item">
                <h3 class="channel_number">20</h3>
                <div class="channel_text">
                  <i class="icon-train"></i><span>地铁</span>
                </div>
              </div>
              <div class="channel_item">
                <h3 class="channel_number">13</h3>
                <div class="channel_text">
                  <i class="icon-bus"></i><span>火车站</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 进度 -->
          <div class="panel progress">
            <div class="panel_title">
              <h3>一季度销售进度</h3>
            </div>
            <div class="progress_map"></div>
            <h3 class="progress_box">75</h3>

            <div class="progress_list">
              <div class="progress_item">
                <div class="progress_number">1,321</div>
                <div class="progress_text">
                  <i class="icon-dot"></i><span>销售额(万元)</span>
                </div>
              </div>
              <div class="progress_item">
                <div class="progress_number">150%</div>
                <div class="progress_text">
                  <i class="icon-dot"></i><span>同比增长</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 全国热榜 -->
        <div class="panel hot">
          <div class="panel_title">
            <h3>全国热榜</h3>
            <h3>各省热销</h3>
            <span>近30日</span>
          </div>
          <div class="hot_list">
            <div class="hot01">
              <div class="hot01_item">
                <i class="icon-cup1"></i><span>可爱多</span>
              </div>
              <div class="hot01_item">
                <i class="icon-cup2"></i><span>娃哈哈</span>
              </div>
              <div class="hot01_item">
                <i class="icon-cup3"></i><span>喜之郎</span>
              </div>
            </div>
            <div class="hot02">
              <div class="hot02_item">
                <p>北京</p>
                <p class="hot02_number">
                  <span>25,179</span><i class="icon-up"></i>
                </p>
              </div>
              <div class="hot02_item active">
                <p>河北</p>
                <p class="hot02_number">
                  <span>23,252</span><i class="icon-down"></i>
                </p>
              </div>
              <div class="hot02_item">
                <p>上海</p>
                <p class="hot02_number">
                  <span>20,760</span><i class="icon-up"></i>
                </p>
              </div>
              <div class="hot02_item">
                <p>江苏</p>
                <p class="hot02_number">
                  <span>23,252</span><i class="icon-down"></i>
                </p>
              </div>
              <div class="hot02_item">
                <p>山东</p>
                <p class="hot02_number">
                  <span>20,760</span><i class="icon-up"></i>
                </p>
              </div>
            </div>
            <div class="hot03">
              <div class="hot02_item">
                <p>可爱多</p>
                <p class="hot02_number">
                  <span>9,086</span><i class="icon-up"></i>
                </p>
              </div>
              <div class="hot02_item">
                <p>小洋人</p>
                <p class="hot02_number">
                  <span>6,724</span><i class="icon-up"></i>
                </p>
              </div>
              <div class="hot02_item">
                <p>好多鱼</p>
                <p class="hot02_number">
                  <span>2,170</span><i class="icon-up"></i>
                </p>
              </div>
              <div class="hot02_item">
                <p>娃哈哈</p>
                <p class="hot02_number">
                  <span>8,341</span><i class="icon-up"></i>
                </p>
              </div>
              <div class="hot02_item">
                <p>可爱多</p>
                <p class="hot02_number">
                  <span>9,086</span><i class="icon-up"></i>
                </p>
              </div>
              <div class="hot02_item">
                <p>小洋人</p>
                <p class="hot02_number">
                  <span>6,724</span><i class="icon-up"></i>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/china.js"></script>
  </body>
</html>
